<template>
  <div id="app">
    <!-- <nav>
      <router-link to="/">Home</router-link> |
      <router-link to="/about">About</router-link>
    </nav> -->
    <transition name="fade">
        <router-view class="page"/>
    </transition>
   
  </div>
</template>

<style lang="scss">
*{
    padding:0;
    margin: 0;
    box-sizing: border-box;
}
#app{
    position: relative;
    // overflow: hidden;
    height: 100%;
}
.page{
    position: absolute;
    height: 100vh;
    top:0;
    left:0;
    width:100%;
}
// 离开 转场  翻转
// 从某种状态离开
.fade-leave{
  transform: rotate(0deg) scale(0.5)
}
// 离开到某种状态
.fade-leave-to{
   transform: rotate(360deg) scale(0.1)
}
.fade-leave-active{
   transition: all 1s linear;
}


// 进入   从右往左平移
//  以某种状态进入
.fade-enter{
  transform: translate(375px);
}
// 进入到某种状态
.fade-enter-to{
transform: translate(0);
}

.fade-enter-active{
  transition: all 1s linear;
}


</style>
